<template>
	<view class="main_bg">
		<app-header title="意见反馈"></app-header>
		<view class="card">
			<view class="cell">
				<view class="label">问题和意见<span>*</span></view>
			</view>
			<view class="textarea">
				<textarea v-model="form.msg" placeholder="请详情描述您的问题，以便我们提供更好的帮助" count maxlength="500"></textarea>
				<view class="count">
					{{form.msg?form.msg.length:0}}/500
				</view>
			</view>
			<view class="cell">
				<view class="label">上传截图({{imgCount(form.imgs)}}/9)</view>
			</view>
			<view class="textarea">
				<app-upload v-model="form.imgs" :value="form.imgs" accept="media" multiple :maxCount="9">
				</app-upload>
			</view>

			<view class="cell">
				<view class="label">类型标签<span>*</span></view>
			</view>
			<view class="tags flex-c">
				<view class="tags_son flex-c" :class="[item.id===form.type_id?'active':'']" v-for="(item,index) in types" :key="index"
					@click="setTag(item.id)">{{item.type_name}}</view>
			</view>
			<view class="flex-c">
				<view class="btn flex-c" @click="onSubmit()">提交</view>
			</view>
		</view>




	</view>
</template>

<script>
	const systemInfo = uni.getSystemInfoSync();
	const safeArea = systemInfo.safeArea;
	export default {
		name: "deviceCard",

		data() {
			return {
				id: 0,
				info: {},
				form: {
					msg: "",
					imgs: "",
					type_id:'',
				},
				types:[],
			};
		},
		computed: {
			actived() {
				return (index) => {
					return this.form.tags.includes(index) ? 'active' : ''
				}

			},
			scrollHeight() {
				return 'calc(100vh - ' + safeArea.top + 'px - 44px  - 102rpx)'
			},
			imgCount() {
				return (imgs) => {
					const list = imgs ? imgs.split('|') : []
					return list.length
				}
			},
			imageList() {
				return (imgs) => {
					console.log(imgs)
					const list = imgs ? imgs.split('|') : []
					return list
				}
			}
		},
		onLoad(options) {
			this.getInfo()
		},
		methods: {

			setTag(type_id) {
				this.$set(this.form,'type_id',type_id)
				// if (this.form.tags.includes(index)) {
				// 	this.form.tags.splice(index, 1)
				// } else {
				// 	this.form.tags.push(index)
				// }
			},
			getInfo() {
				this.$http.post('/data/api.auth.User/typeMsg', {}).then(res => {
					this.types = res.data
				}).catch(() => {

				})
			},
			onSubmit() {
				if (!this.form.msg) {
					this.$func.tips('请输入问题和意见')
					return
				}
				if (!this.form.type_id) {
					this.$func.tips('请选择类型标签')
					return
				}
				this.$http.post('/data/api.auth.User/addMsg', {
					...this.form
				}).then(res => {
					this.$func.tips('反馈成功')
					setTimeout(()=>{
						this.$func.toBack()
					},2000)
				})
			}

		} 
	}
</script>

<style scoped lang="scss">
	.tags {
		flex-wrap: wrap;
		justify-content: flex-start;
		.tags_son {
			background-color:#FFFFFF;
			height: 56rpx;
			padding:0 10rpx;
			margin: 0 10rpx 10rpx 0;
			border-radius: 10rpx;
			&.active {
				background-color: #4F6FF6;
				color: #FFFFFF;
			}
		}
	}
	.card {
		border-radius: 20px;

		margin: 20rpx;

	}

	.textarea {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.line {
		background-color: #E9E9E9;
		height: 1px;
		margin: 15rpx 0;
	}

	.icon {
		transition-duration: 0.3s;
		width: 40rpx;
		height: 40rpx;

		&.open {
			transform: rotate(180deg);
		}
	}

	.imgs_list {
		padding: 5px 0;
		justify-content: flex-start;

		.imgs_son {
			margin: 0 8px 0 0;
			border-radius: 4px;
			overflow: hidden;
		}
	}

	.cell {
		// height: 60rpx;

		.label {
			color: #333333;
			span {
				color: red;
			}
		}

		.value {
			color: #ADADAD;
		}
	}

	.btn {
		width: 600rpx;
		height: 80rpx;
		background-color: #4F6FF6;
		margin-top: 100rpx;

		border-radius: 10rpx;
		font-size: 30rpx;

		color: #FFFFFF;
		margin-left: 10rpx;
	}

	.count {
		font-size: 28rpx;
		text-align: right;
		color: #B9B9B9;
	}
</style>